<template>
  <el-form
 :model="ruleForm"
 :rules="rules"
 ref="ruleForm"

 class="demo-ruleForm"
 >
 <el-row type="flex" justify="center">
 <el-col :span="5">
     <el-form-item prop="username">
     <el-input
     type="text"
     placeholder="请输入用户名"
     required="required"
     v-model="ruleForm.username"
     prefix-icon="el-icon-user-solid"
     ></el-input>
     </el-form-item>
 </el-col>
 </el-row>
 <el-row type="flex" justify="center">
 <el-col :span="5">
     <el-form-item prop="password">
     <el-input
     type="password"
     placeholder="请输入密码"
     prefix-icon="el-icon-lock"
     v-model="ruleForm.password"
     ></el-input>
     </el-form-item>
 </el-col>
 </el-row>
 <el-row type="flex" justify="center">
 <el-col :span="3">
     <el-form-item prop="code">
     <el-input
     type="code"
     placeholder="请输入验证码"
     prefix-icon="el-icon-lock"
     v-model="ruleForm.code"
     ></el-input>
     </el-form-item>
 </el-col>
 <el-image :src=beginSrc alt="验证码" style="cursor: pointer"  @click="changeCheckCode()" >
 </el-image>
 </el-row>
 <el-row type="flex" justify="center">
 <el-col :span="5">
     <el-form-item>
       <!-- 
           TODO:点击登录按钮，执行函数submitForm，ruleForm表示整个表单
        -->
     <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
     <el-button type="primary"><a href="#/register" target="_self">注册</a></el-button>
     </el-form-item>
 </el-col>
 </el-row>
</el-form>

</template>

<script>
import axios from 'axios'
export default {
data() {
return {
 ruleForm: {
   username: '',
   password: '',
   code:""
  },
 beginSrc:'/checkCodeServlet',
 rules: {
   username: [
     { required: true, message: '请输入用户名', trigger: 'blur' },
   ],
   password: [
     { required: true, message: '请输入密码', trigger: 'blur' }
   ]
 }
};
},
methods: {
submitForm(formName) {//formName=ruleForm整个表单
 this.$refs[formName].validate((valid) => {
   if (valid) {
     //TODO:向后台发送异步请求，携带请求数据完成登录
     axios.post("/loginServlet",`username=${this.ruleForm.username}&pwd=${this.ruleForm.password}&code=${this.ruleForm.code}`)
          .then(resp=>{
            if(resp.data.flag){
               //后端响应是true表示登录成功，跳转到主页userList.vue
               //通过路径即到路由红映射到userList.vue组件
               location.href="#/userList";
               this.$notify({
                                    title: resp.data.message,
                                    message: '那你呢 除了知道我是宇宙最强最潮流最帅最牛超级无敌邪魅嗜血究极狂暴螺旋升天帅暗影少帅 你又了解我多少',
                                    position: 'bottom-left'
                                    });
            }else{
               //后端响应是false表示登录失败，在当前登录页面提示用户名或者密码错误
               this.$notify({
                                    title: resp.data.message,
                                    message: '那你呢 除了知道我是宇宙最强最潮流最帅最牛超级无敌邪魅嗜血究极狂暴螺旋升天帅暗影少帅 你又了解我多少',
                                    position: 'bottom-left'
                                    });
            }
          });

   } else {
     //表单校验失败
     console.log('error submit!!');
     return false;
   }
 });
},
resetForm(formName) {
 this.$refs[formName].resetFields();
},
changeCheckCode() {
       this.beginSrc= "/checkCodeServlet?t="+new Date().getTime();
}
}
}

</script>

<style>

</style>